<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
                type="primary"
                icon="el-icon-delete"
                class="handle-del mr10"
                @click="delAllSelection"
        >批量删除
        </el-button>
        <el-select v-model="query.user.state" placeholder="类别" class="handle-select mr10">
          <el-option key="3" label="全部" value=""></el-option>
          <el-option key="0" label="管理员" value=0></el-option>
          <el-option key="1" label="用户" value=1></el-option>
          <el-option key="2" label="商家" value=2></el-option>
        </el-select>
        <el-input v-model="query.user.uname" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table
              :data="tableData"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="uname" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>

        <!--        <el-table-column label="账户余额">-->
        <!--          <template slot-scope="scope">￥{{scope.row.money}}</template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="头像(查看大图)" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-image-->
        <!--                    class="table-td-thumb"-->
        <!--                    :src="scope.row.thumb"-->
        <!--                    :preview-src-list="[scope.row.thumb]"-->
        <!--            ></el-image>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="address" label="地址"></el-table-column>-->
        <el-table-column label="性别" align="center">
          <template slot-scope="scope">
            <el-tag
                    :type="scope.row.sex===0?'success':(scope.row.sex===1?'danger':'')"
            >{{scope.row.sex | getSex}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creattime" label="注册时间">
          <template slot-scope="scope">{{scope.row.creattime | dateFormat}}</template>
        </el-table-column>
        <el-table-column prop="level" label="等级" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
                    :type="scope.row.state===1?'success':(scope.row.state===0?'danger':(scope.row.state===2?'warning':''))"
            >{{scope.row.state | getState}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.uname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="等级">
          <el-input v-model="form.level"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0" value=0>男</el-radio>
            <el-radio :label="1" value=1>女</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getlist, deleteList, update} from "../../network/user"

  export default {
    name: 'basetable',
    data() {
      return {
        query: {
          user: {
            uname: ""
          },
          pageIndex: 1,
          pageSize: 5,
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        pageTotal: 0,
        form: {},
        idx: -1,
        id: -1
      };
    },
    created() {
      this.getData();
    },
    methods: {
      // 获取 easy-mock 的模拟数据
      getData(num) {
        // fetchData(this.query).then(res => {
        //     console.log(res);
        //     this.tableData = res.list;
        //     this.pageTotal = res.pageTotal || 50;
        // });
        getlist(this.query.user, 5, num).then(res => {
          console.log(res);
          this.tableData = res.records;
          this.pageTotal = res.total || 50;
          console.log(this.tableData);
        })
      },
      // 触发搜索按钮
      handleSearch() {
        console.log(this.query.user);
        this.$set(this.query, 'pageIndex', 1);
        this.getData();
      },
      // 删除操作
      handleDelete(index, id) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            console.log(this.delList);
            deleteList(this.delList).then(res => {
              if (res) {
                this.$message.success('删除成功');
                this.tableData.splice(index, 1);
              } else {
                this.$message.error('删除失败');
              }
            })
          })
          .catch(() => {
          });
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.delList = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.delList.push(this.multipleSelection[i].id)
        }
        console.log(this.delList);
      },
      delAllSelection() {
        const length = this.multipleSelection.length;
        let str = '';
        for (let i = 0; i < length; i++) {
          str += this.multipleSelection[i].uname + ' ';
        }
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            console.log(this.delList);
            deleteList(this.delList).then(res => {
              if (res) {
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
              } else {
                this.$message.error(`删除失败！`);
              }
            })
            this.getData(this.query.pageIndex)
          })
          .catch(() => {

          });
      },
      // 编辑操作
      handleEdit(index, row) {
        this.idx = index;
        this.form = row;
        this.editVisible = true;
      },
      // 保存编辑
      saveEdit() {
        console.log(this.form);
        update(this.form).then(res=>{
          console.log(res);
        })

        this.editVisible = false;
        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        this.$set(this.tableData, this.idx, this.form);

      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, 'pageIndex', val);
        this.getData(val);
      }
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
